<script lang="ts">
	import { useActions } from '$lib/internal';
	import type { LoaderProps } from '../Loader';

	export let use: LoaderProps['use'] = [];
	export let size: LoaderProps['size'] = 25;
	export let color: LoaderProps['color'] = 'blue';
	export let className: LoaderProps['className'] = '';
	export { className as class };
</script>

<svg
	viewBox="0 0 135 140"
	xmlns="http://www.w3.org/2000/svg"
	fill={color}
	width={`${size}px`}
	class={className}
	use:useActions={use}
>
	<rect y="10" width="15" height="120" rx="6">
		<animate
			attributeName="height"
			begin="0.5s"
			dur="1s"
			values="120;110;100;90;80;70;60;50;40;140;120"
			calcMode="linear"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="y"
			begin="0.5s"
			dur="1s"
			values="10;15;20;25;30;35;40;45;50;0;10"
			calcMode="linear"
			repeatCount="indefinite"
		/>
	</rect>
	<rect x="30" y="10" width="15" height="120" rx="6">
		<animate
			attributeName="height"
			begin="0.25s"
			dur="1s"
			values="120;110;100;90;80;70;60;50;40;140;120"
			calcMode="linear"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="y"
			begin="0.25s"
			dur="1s"
			values="10;15;20;25;30;35;40;45;50;0;10"
			calcMode="linear"
			repeatCount="indefinite"
		/>
	</rect>
	<rect x="60" width="15" height="140" rx="6">
		<animate
			attributeName="height"
			begin="0s"
			dur="1s"
			values="120;110;100;90;80;70;60;50;40;140;120"
			calcMode="linear"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="y"
			begin="0s"
			dur="1s"
			values="10;15;20;25;30;35;40;45;50;0;10"
			calcMode="linear"
			repeatCount="indefinite"
		/>
	</rect>
	<rect x="90" y="10" width="15" height="120" rx="6">
		<animate
			attributeName="height"
			begin="0.25s"
			dur="1s"
			values="120;110;100;90;80;70;60;50;40;140;120"
			calcMode="linear"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="y"
			begin="0.25s"
			dur="1s"
			values="10;15;20;25;30;35;40;45;50;0;10"
			calcMode="linear"
			repeatCount="indefinite"
		/>
	</rect>
	<rect x="120" y="10" width="15" height="120" rx="6">
		<animate
			attributeName="height"
			begin="0.5s"
			dur="1s"
			values="120;110;100;90;80;70;60;50;40;140;120"
			calcMode="linear"
			repeatCount="indefinite"
		/>
		<animate
			attributeName="y"
			begin="0.5s"
			dur="1s"
			values="10;15;20;25;30;35;40;45;50;0;10"
			calcMode="linear"
			repeatCount="indefinite"
		/>
	</rect>
</svg>
